<template>
  <div class="app-container">
    <div class="search-container">
      <el-form v-show="showSearch" ref="queryParamsRef" :inline="true" :model="queryParams" label-width="100px">
        <el-form-item label="对照状态" prop="firstVisitIndicator">
          <el-radio-group v-model="queryParams.isContrast" @change="handleQuery">
            <el-radio :value="''">全部</el-radio>
            <el-radio v-for="dict in dictDataMap['sys_yes_no']" :key="dict.dictValue"
                      :value="dict.dictValue">{{ dict.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="项目类别" prop="itemClassGroup">
          <el-select v-model="queryParams.itemClassGroup" class="width-120" clearable placeholder="请选择"
                     @change="handleQuery">
            <el-option :value="'0'" label="全部">全部</el-option>
            <el-option :value="'1'" label="药品">药品</el-option>
            <el-option :value="'2'" label="非药品">非药品</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目代码" prop="itemCode">
          <el-input
            v-model="queryParams.itemCode"
            clearable
            placeholder="请输入医保项目代码"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="拼音码" prop="inputCode">
          <el-input
            v-model="queryParams.inputCode"
            clearable
            placeholder="请输入医保项目名称"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="项目名称" prop="itemName">
          <el-input
            v-model="queryParams.itemName"
            clearable
            placeholder="请输入医保项目名称"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <query-form-button @handleQuery="handleQuery" @resetQuery="resetQuery"/>
        </el-form-item>
      </el-form>
    </div>

    <el-table v-adaptive :border="true" :cell-style="tableCellStyle" :data="hisVsMedicalList"
              :header-cell-style="$headerCellStyle" :stripe="true" highlight-current-row>
      <el-table-column :align="'center'" label="是否对照" prop="itemClass" width="80">
        <template #default="scope">
                    <span v-if="scope.row.itemCodeYbCompare" style="color: #1ab394">
                        已对照
                    </span>
          <span v-else style="color: #9d0303">
                        未对照
                    </span>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="项目类别" prop="itemClass" width="80">
        <template #default="scope">
          <dict-data-tag :options="dictDataMap['bill_item_class_dict']" :value="scope.row.itemClass"/>
        </template>
      </el-table-column>
      <el-table-column :align="'left'" :header-align="'center'" :show-overflow-tooltip="true" label="项目名称"
                       min-width="180" prop="itemName"/>
      <el-table-column :align="'left'" :header-align="'center'" :show-overflow-tooltip="true" label="医保项目名称"
                       min-width="180" prop="itemNameMed">
        <template #default="scope">
          <span style="color:#0a65ea;">{{ scope.row.itemNameMed }}</span>
        </template>
      </el-table-column>
      <el-table-column :align="'left'" :header-align="'center'" :show-overflow-tooltip="true" label="项目价格(元)"
                       min-width="85" prop="price"/>
      <el-table-column :align="'left'" :show-overflow-tooltip="true" header-align="center" label="项目规格" prop="itemSpec"
                       width="140"/>
      <el-table-column :align="'left'" :show-overflow-tooltip="true" header-align="center" label="医保项目规格" prop="itemSpecMed"
                       width="140">
        <template #default="scope">
          <span style="color:#0a65ea;">{{ scope.row.itemSpecMed }}</span>
        </template>
      </el-table-column>
      <el-table-column :align="'left'" :show-overflow-tooltip="true" label="项目代码" prop="itemCode"
                       width="120"/>
      <el-table-column :align="'left'" header-align="center" label="医保项目代码" min-width="220" prop="itemCodeMed">
        <template #default="scope">
          <span style="color:#0a65ea;">{{ scope.row.itemCodeMed }}</span>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" :show-overflow-tooltip="true" label="剂型" prop="drugFrom" width="80"/>
      <el-table-column :align="'left'" :header-align="'center'" :show-overflow-tooltip="true" label="厂商"
                       prop="firmName"
                       width="150"/>
      <el-table-column :align="'left'" :header-align="'center'" :show-overflow-tooltip="true" label="医保项目厂商"
                       prop="firmNameMed"
                       width="150">
        <template #default="scope">
          <span style="color:#0a65ea;">{{ scope.row.firmNameMed }}</span>
        </template>
      </el-table-column>
      <el-table-column :align="'left'" :header-align="'center'" :show-overflow-tooltip="true" label="批准文号"
                       prop="passNo"
                       width="120"/>
      <el-table-column :align="'center'" label="项目等级" prop="itemGradeMed" width="80"/>
      <!-- 1国产/2进口 -->
<!--      <el-table-column :align="'center'" label="国产/进口" prop="importDomestic" width="70"/>-->
      <el-table-column :align="'center'" label="对照操作人姓名" prop="createByNameMed" width="110"/>
      <el-table-column :align="'center'" label="对照操作时间" prop="createTimeMed" width="140">
        <template #default="scope">
          <span>{{ $parseTime(scope.row.createTimeMed, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="对照操作修改人姓名" prop="updateByNameMed" width="100"/>
      <el-table-column :align="'center'" label="对照操作修改时间" prop="updateTimeMed" width="140">
        <template #default="scope">
          <span>{{ $parseTime(scope.row.updateTimeMed, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" :show-overflow-tooltip="true" label="备注信息" prop="remarksMed"/>
      <el-table-column :align="'left'" :header-align="'center'" class-name="small-padding fixed-width"
                       fixed="left" label="操作"
                       width="90">
        <template #default="scope">
          <el-tooltip class="item" content="医保对照" effect="dark" placement="left">
            <el-button circle type="primary" @click="medComparison(scope.row)">
              <svg-icon icon-class="dui-zhao"/>
            </el-button>
          </el-tooltip>
          <el-tooltip v-if="scope.row.itemCodeYbCompare" class="item" content="取消医保对照" effect="dark"
                      placement="right">
            <el-button circle type="danger" @click="cancelMedComparisonFun(scope.row)">
              <svg-icon icon-class="cheXiao"/>
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.pageNum"
      :total="total"
      @pagination="getList"
    />
    <el-drawer
      v-model="drawer"
      :close="drawerClose"
      :close-on-click-modal="false"
      :direction="direction"
      size="85%"
      title="医保数据对照"
    >
      <template #header>
        <div class="ml20 fz15" style="color: #00c0ef">
          <span class="mr20" style="font-size: 16px;font-weight: bold;color: #484848">医保数据对照</span>
          <span>HIS项目信息:<span class="fz15 ml10 mr10" style="color: #7171ff">{{
              showParams.itemName
            }}&nbsp;&nbsp;|
                    </span></span>
          <span class="mr10">代码：<span class="ys-css">{{ showParams.itemCode }}</span>
                    <span>价格：<span class="ys-css">{{ showParams.price }}&nbsp;&nbsp;|</span></span>
                    <span>规格：<span class="ys-css">{{ showParams.itemSpec }}&nbsp;&nbsp;|</span></span>
                    <span>厂家：<span class="ys-css">{{ showParams.firmName }}&nbsp;&nbsp;|</span></span>
                    <span>批准文号：<span class="ys-css">{{ showParams.passNo }}&nbsp;&nbsp;|</span></span>
                    <span>剂型：<span class="ys-css">{{ showParams.drugFrom }}</span></span>
          </span>
        </div>
      </template>
      <template #default>
        <div class="search-container">
          <el-form v-show="showSearch" ref="drawerQueryParamsRef" :inline="true" :model="drawerQueryParams"
                   label-width="80px">
            <el-form-item label="医保目录" prop="contentType">
              <el-radio-group v-model="drawerQueryParams.contentType" @change="contentTypeChange">
                <el-radio v-for="dict in apiDirectoryTList" :key="dict.dictValue" :value="dict.dictValue"
                          border>{{ dict.dictLabel }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="名称" prop="itemName">
              <el-input v-model="drawerQueryParams.itemName" placeholder="按回车键搜索"
                        @keyup.enter="drawerGetList"/>
            </el-form-item>
            <el-form-item label="厂家" prop="firmName">
              <el-input v-model="drawerQueryParams.firmName" placeholder="按回车键搜索"
                        @keyup.enter="drawerGetList"/>
            </el-form-item>
            <el-form-item label="规格" prop="itemSpec">
              <el-input v-model="drawerQueryParams.itemSpec" placeholder="按回车键搜索"
                        @keyup.enter="drawerGetList"/>
            </el-form-item>
            <el-form-item label="批准文号" prop="passNo">
              <el-input v-model="drawerQueryParams.passNo" placeholder="按回车键搜索"
                        @keyup.enter="drawerGetList"/>
            </el-form-item>
            <el-form-item>
              <query-form-button @handleQuery="drawerGetList" @resetQuery="drawerResetQuery"/>
              <el-button type="success" @click="submitForm">保存
              </el-button>
              <el-button type="danger" @click="closePage">关闭页面
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-row>
          <el-table v-adaptive="350" :border="true" :data="medicalList" :header-cell-style="$headerCellStyle"
                    :stripe="true" highlight-current-row>
            <el-table-column align="center" fixed="left" width="38">
              <template #default="scope">
                <el-radio
                  v-model="showParams.itemCodeMed"
                  :label="scope.row.ybdm"
                >{{ "" }}
                </el-radio>
              </template>
            </el-table-column>
            <el-table-column :align="'left'" fixed="left" header-align="center" label="医保名称" prop="ybmc"
                             width="260px">
              <template #default="scope">
                <span class="ys-css">{{ scope.row.ybmc }}</span>
              </template>
            </el-table-column>
            <el-table-column :align="'left'" fixed="left" header-align="center" label="医保代码" min-width="260px"
                             prop="ybdm">
              <template #default="scope">
                <span class="ys-css">{{ scope.row.ybdm }}</span>
              </template>
            </el-table-column>
            <el-table-column :align="'center'" label="医保项目等级" prop="ybxmdj" width="100px">
              <template #default="scope">
                <span>{{ scope.row.ybxmdj }}</span>
              </template>
            </el-table-column>
            <el-table-column :align="'left'" :show-overflow-tooltip="true" header-align="center" label="规格" prop="itemSpec"
                             width="120px">
              <template #default="scope">
                <span>{{ scope.row.itemSpec }}</span>
              </template>
            </el-table-column>
            <el-table-column :align="'center'" :show-overflow-tooltip="true" label="剂型" prop="itemJx"
                             width="120px">
              <template #default="scope">
                <span>{{ scope.row.itemJx }}</span>
              </template>
            </el-table-column>
            <el-table-column :align="'center'" :show-overflow-tooltip="true" label="包装数量" prop="bzsl"
                             width="80px">
              <template #default="scope">
                <span>{{ scope.row.bzsl }}</span>
              </template>
            </el-table-column>
            <el-table-column :align="'center'" :show-overflow-tooltip="true" label="单位" prop="bzdw"
                             width="60px">
              <template #default="scope">
                <span>{{ scope.row.bzdw }}</span>
              </template>
            </el-table-column>
            <el-table-column :align="'left'" :show-overflow-tooltip="true" header-align="center" label="厂家" prop="firmName"
                             width="180px">
              <template #default="scope">
                <span>{{ scope.row.firmName }}</span>
              </template>
            </el-table-column>
            <!--            <el-table-column :align="'center'" label="价格(元)" prop="price" width="90px"-->
            <!--                             :show-overflow-tooltip="true">-->
            <!--              <template #default="scope">-->
            <!--                <span>{{ scope.row.price }}</span>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <el-table-column :align="'left'" :show-overflow-tooltip="true" fixed="left" label="批准文号" prop="passNo"
                             width="180px">
              <template #default="scope">
                <span>{{ scope.row.passNo }}</span>
              </template>
            </el-table-column>
            <el-table-column :align="'center'" :show-overflow-tooltip="true" label="开始日期" prop="ksrq"
                             width="100px">
              <template #default="scope">
                <span>{{ scope.row.ksrq }}</span>
              </template>
            </el-table-column>
            <el-table-column :align="'center'" :show-overflow-tooltip="true" label="自付比例" prop="medicalScale"
                             width="100px">
              <template #default="scope">
                <span>{{ scope.row.medicalScale }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </template>
    </el-drawer>
  </div>
</template>
<script lang="ts">
export default {
  name: "HisVsMedical"
}
</script>

<script lang="ts" setup>
import {queryPageHisVsMed} from "@/api/base/priceList.ts"

import {useDictStoreHook} from "@/store/modules/dict";
import {useUserStoreHook} from "@/store/modules/user.ts";
import {
  selectYbZdDirectoryList,
  cancelMedComparison,
  addHisVsMedical
} from "@/api/msip/hisVsMedical.ts";
import {ElMessage} from "element-plus";

const {proxy} = getCurrentInstance() as any;
const useUserStore = useUserStoreHook();
// 登录用户信息
const userInfo = <UserInfoBusi>useUserStore.user.userInfo;
const dictStore = useDictStoreHook();
let dictDataMap = ref(dictStore.isTypeGetData('bill_item_class_dict', 'sys_yes_no', 'api_directory_type'))


const apiDirectoryTList = ref<any>([])
// 对照弹出框form对象
const drawerQueryParams = ref<any>({})
const drawer = ref(false)
// 侧边弹出框 弹出方向
const direction = ref('rtl')
const showParams = ref<any>({})
const queryParamsRef = ref()
// 主页面已对照列表
const hisVsMedicalList = ref([]);
// 对照弹出框待对照列表
const medicalList = ref<any>([]);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  priceId: "",
  orgId: userInfo.orgId,
  medicalType: "",
  itemClassMed: "",
  itemCodeMed: "",
  itemCode: "",
  itemNameMed: "",
  itemName: "",
  remarks: "",
  drugFormMed: "",
  contentType: "",
  importDomestic: "",
  // 对照状态
  isContrast: "",
  itemClass: "",
  itemClassGroup: "0"
})

/** 查询医保his对照列表 */
function getList() {
  queryPageHisVsMed(queryParams.value).then((response: any) => {
    hisVsMedicalList.value = response.rows;
    total.value = response.total;
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  queryParamsRef.value.resetFields()
  // proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

function contentTypeChange() {
  drawerGetList()
}

/**
 * 对照弹出框查询字典信息
 */
function drawerGetList() {
  if (!drawerQueryParams.value.contentType) {
    return ElMessage.error("请先选择【医保项目目录】后再查询字典信息")
  }
  const query = {
    orgId: queryParams.value.orgId,
    contentType: drawerQueryParams.value.contentType,
    ybmc: drawerQueryParams.value.itemName,
    ybdm: drawerQueryParams.value.itemCode,
    itemSpec: drawerQueryParams.value.itemSpec,
    itemJx: drawerQueryParams.value.drugFrom,
    firmName: drawerQueryParams.value.firmName,
    passNo: drawerQueryParams.value.passNo,
  }
  selectYbZdDirectoryList(query).then((res: any) => {
    medicalList.value = res.data;
  })
}

/** 打开对照弹出框 */
function medComparison(row: any) {
  drawer.value = true
  showParams.value = {
    itemName: row.itemName,
    itemCode: row.itemCode,
    itemSpec: row.itemSpec,
    firmName: row.firmName,
    drugFrom: row.drugFrom,
    passNo: row.passNo,
    price: row.price,
    priceId: row.priceId,
    hisVsMedicalId: row.hisVsMedicalId,
    itemCodeMed: row.itemCodeMed,

  }
  console.log("showParams.value", showParams.value)
  drawerQueryParams.value.itemName = row.itemName
  //医保目录  || '1301'
  drawerQueryParams.value.contentType = row.ybDirectoryType
  drawerQueryParams.value.firmName = row.firmName
  drawerQueryParams.value.itemSpec = ""
  drawerGetList()

}

/** 提交按钮 */
function submitForm() {
  if (!showParams.value.itemCodeMed) {
    return ElMessage.error("请勾选正确的医保数据后，再保存")
  }
  const tableIndex = medicalList.value.findIndex((item: any) => item.ybdm == showParams.value.itemCodeMed)
  let tableRow: any = {}
  if (tableIndex > -1) {
    tableRow = medicalList.value[tableIndex]
  }
  const saveForm = {
    priceId: showParams.value.priceId,
    orgId: queryParams.value.orgId,
    itemCodeMed: tableRow.ybdm,
    itemNameMed: tableRow.ybmc,
    itemGradeMed: tableRow.ybxmdj,
    contentType: drawerQueryParams.value.contentType,
    itemSpecMed: tableRow.itemSpec,
    firmNameMed: tableRow.firmName,
    hisVsMedicalId: showParams.value.hisVsMedicalId,
    limitUseText: tableRow.limitUseText,
    limitUseFlag: tableRow.limitUseFlag,
  }
  addHisVsMedical(saveForm).then(() => {
    ElMessage.success("对照成功");
    drawerClose()
    getList();
  }).finally(() => {
  });
}

/**
 * 取消对照
 */
function cancelMedComparisonFun (row: any) {
  ElMessageBox.confirm("确定要【取消对照】吗？", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    cancelMedComparison(row.hisVsMedicalId).then((res: any) => {
      ElMessage.success("取消成功")
      handleQuery();
    })
  });
}

/**
 * 关闭对照页面
 */
function closePage() {

  drawer.value = false
}


/** 导出按钮操作 */
function handleExport() {
  proxy.download('msip/hisVsMedical/export', {
    ...queryParams.value
  }, `hisVsMedical_${new Date().getTime()}.xlsx`)
}

/**
 * 设置单元格css
 */
function tableCellStyle({row, column, rowIndex, columnIndex}) {
  if (columnIndex === 4 || columnIndex === 6 || columnIndex === 8 || columnIndex === 11 || columnIndex === 12) {
    if (row.itemCodeYbCompare) {
      // 如果是已对照 背景色蓝色，字体色黑色
      return {'background': '#aff5ba', 'color': '#0c0c0c'};
    } else {
      // 如果是未对照 背景色红色，字体色黑色
      return {'background': '#ffb1b1', 'color': '#ffffff'};
    }
  }
}

/**
 * 对照弹出框关闭事件
 */
function drawerClose() {
  drawer.value = false;
}

/**
 * 对照弹出框查询事件
 */
function drawerHandleQuery() {
}

/**
 * 对照弹出框重置事件
 */
function drawerResetQuery() {
}

apiDirectoryTList.value = dictDataMap.value["api_directory_type"].filter(e => {
  return e.dictValue === '1301' || e.dictValue === '1302' ||
    e.dictValue === '1305' || e.dictValue === '1303' || e.dictValue === '1306'
})

getList();
</script>

<style scoped>
:deep(.el-drawer.rtl) {
  bottom: 0px;
  height: 90%;
  top: 50px;
}

:deep(.el-drawer__header) {
  margin-bottom: 0;
}
</style>
